import {Col, Image, Input, Menu, MenuProps, Row} from "antd";
import {useState} from "react";
import {SearchOutlined} from "@ant-design/icons";
import classnames from "classnames";
import styles from './index.less';
import classNames from "classnames";
type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
  {
    label: '常用',
    key: 'mail',
  },
  {
    label: '搜索',
    key: 'search',
  },
  {
    label: '社区',
    key: 'SubMenu',
  },
  {
    key: 'image',
    label: '图片',
  },
  {
    key: 'life',
    label: '生活',
  },
];
const menuItems1 = ["站内","Bing","百度","Google","Perplexity"];
const menuItems2 = ["Bing","百度","Google","Perplexity","YOU","360","搜狗","神马"];
const menuItems3 = ["Hugging Face","GitHub","飞桨","魔搭","和鲸","掘金","知乎"];
const menuItems4 = ["文心一格", "花瓣AI圈", "Civitai","OpenArt","NightCafe","DeviantArt","Lexica"];
const menuItems5 = ["淘宝","京东","下厨房","香哈菜谱","12306","快递100","去哪儿"];
export default ()=>{
  const [current, setCurrent] = useState('mail');
  const [menuItems, setMenuItems] = useState<string[]>(menuItems1);
  const [tagIndex,setTagIndex] = useState<number>(0);
  const onClick: MenuProps['onClick'] = (e) => {
    setCurrent(e.key);
    if(e.key === 'mail'){
      setMenuItems(menuItems1);
    }else if(e.key === 'search'){
      setMenuItems(menuItems2);
    }else if(e.key === 'SubMenu'){
      setMenuItems(menuItems3);
    }else if(e.key === 'image'){
      setMenuItems(menuItems4);
    }else if(e.key === 'life'){
      setMenuItems(menuItems5);
    }
    setTagIndex(0);
  };
  return (
    <Row style={{height:260,background:'transparent'}}>
      <Col span={4} />
      <Col span={16} style={{display:'flex',justifyContent:'center',flexDirection:'column',alignItems:'center'}}>
        <Image src='https://ai-bot.cn/ai-bot-logo-vector.svg' style={{height:100}} />
        <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} style={{width:300,background:'transparent'}} />
        <div style={{height:16}} />
        <Input style={{height:56,borderRadius:56,background:'rgba(0, 0, 0, .2)',fontSize:16}} placeholder='站内AI工具搜索' suffix={<SearchOutlined style={{color:'#fff',fontSize:24}} />} />
        <ul
          style={{
            position:'relative',
            listStyle: "none",
            padding: 0,
            margin: 0,
            display: "flex",
            gap: "10px",
          }}
        >
          {menuItems.map((item, index) => (
            <li onClick={()=>setTagIndex(index)} className={tagIndex===index?classNames(styles.currentTips,styles.tips):styles.tips} key={index}>{item}</li>
          ))}
        </ul>
      </Col>
      <Col span={4} />
    </Row>
  )
}
